<template>
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="keyword" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="findlike">查询</el-button>
        </el-form-item>
        <el-button type="primary" @click="add('add')">新增</el-button>
      </el-form>


      <el-table
        :data="studentList"
        stripe
        style="width: 100%">
        <el-table-column
          fixed
          prop="studentId"
          label="编号"
          width="60">
        </el-table-column>
        <el-table-column
          prop="studentName"
          label="姓名"
          width="80">
        </el-table-column>
        <el-table-column
          prop="studentSex"
          label="性别"
          width="80">
        </el-table-column>
        <el-table-column
          prop="studentTel"
          label="电话"
          width="150">
        </el-table-column>
        <el-table-column
          prop="studentEmail"
          label="邮箱"
          width="150">
        </el-table-column>
        <el-table-column
          prop="studentCarid"
          label="身份证号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="studentAddr"
          label="地址"
          width="150">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button @click="update(scope.row)" type="primary" icon="el-icon-edit" circle ></el-button>
            <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" circle ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=pageable.current
          :page-sizes=pagesizes
          :page-size=pageable.size
          layout="total, sizes, prev, pager, next, jumper"
          :total=pageable.total>
        </el-pagination>
      </div>



      <el-dialog title="学生信息" :visible.sync="dialogFormVisible">
        <el-form :model="frm1" ref="frm1">

            <el-input type="hidden" v-model="frm1.studentId" autocomplete="off"></el-input>


          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="frm1.studentName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="frm1.studentPass" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="frm1.studentSex" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="frm1.studentTel" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="frm1.studentEmail" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="身份证号" :label-width="formLabelWidth">
            <el-input v-model="frm1.studentCarid" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="frm1.studentAddr" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onsumbit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "admin_student",
        data(){
          return{
            studentList:[
              {
                studentId:'',
                studentName:'',
                studentPass:'',
                studentSex:'',
                studentTel:'',
                studentEmail:'',
                studentCarid:'',
                studentAddr:''
              }
            ],
            frm1:{
              studentId:'',
              studentName:'',
              studentPass:'',
              studentSex:'',
              studentTel:'',
              studentEmail:'',
              studentCarid:'',
              studentAddr:''
            },
            pageable:{
              current:'1',
              size:"5",
              total:'100',
              pages:'100',
            },
            pagesizes:[5,10,15,20],
            keyword:'',
            formLabelWidth: '120px',
            dialogFormVisible: false,
          }
        },
        methods: {
          //模糊查询
          findlike(){
            this.$axios.get('/student/findAll',{
              params:{
                current:'1',
                size:this.pageable.size,
                keyword:this.keyword
              }
            }).then(res=>{
              this.studentList=res.data.records;
              this.pageable.total=res.data.total;
              this.pageable.pages=res.data.pages;
            })
          },
          //点击新增
          add(){
            this.frm1.studentId='';
            this.frm1.studentName='';
            this.frm1.studentPass='';
            this.frm1.studentSex='';
            this.frm1.studentTel='';
            this.frm1.studentEmail='';
            this.frm1.studentCarid='';
            this.frm1.studentAddr='';
            this.dialogFormVisible=true;
          },
          //点击提交
          onsumbit(){
            this.$axios.post('/student/update',this.frm1).then(res=>{
              if(res.code==200){
                this.dialogFormVisible=false;
              }
              this.findAll();
            });
          },
          //点击修改，
          update(row){
            this.dialogFormVisible=true;
            this.frm1=row;
          },
          //删除
          del(row){
            this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
                this.$axios.get('/student/del?studentId='+row.studentId).then(res=>{
                    this.findAll();
                   })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消',
              });
            });
          },
          //查询所有
          findAll(){
            this.$axios.get('/student/findAll',{
              params:{
                current:this.pageable.current,
                size:this.pageable.size,
                keyword:this.keyword
              }
            }).then(res=>{
              this.studentList=res.data.records;
              this.pageable.total=res.data.total;
              this.pageable.pages=res.data.pages;
            })
          },
          handleSizeChange(val) {
            this.pageable.size=val;
            this.findAll();
          },
          handleCurrentChange(val) {
            this.pageable.current=val;
            this.findAll();
          }
        },
        mounted(){
          this.findAll();
        }
    }
</script>

<style scoped>

</style>
